<!--
/**
* @name SchemeView
* @description 查看方案
* @author wind-lc
* @date 2020-05-25
* @param {Boolean} viewVisible 是否打开查看抽屉
* @param {Object} viewId 查看抽屉id
* @param {Event} handleVisible 关闭查看抽屉
* @example <scheme-view :viewVisible="" :viewId="" @handleVisible=""></scheme-view>
*/
-->
<template>
  <a-drawer :title="title"
            :width="1000"
            :visible="viewVisible"
            :destroyOnClose="true"
            @close="handleVisible">
    <div class="drawer-wrap">
      <form-loading :formLoadingVisible="!formLoadingVisible"></form-loading>
      <a-form-model :model="form"
                    ref="form"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="方案名称">
              <a-input v-model="form.name"
                       disabled>
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="应急类型">
              <a-select v-model="form.emergencyType"
                        disabled>
                <a-select-option v-for="(item,index) in emergencyTypeList"
                                 :key="index"
                                 :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="起止时间">
              <a-range-picker class="input-width"
                              disabled
                              v-model="form.fromTo"></a-range-picker>
            </a-form-model-item>
          </a-col>
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="响应类型">
              <a-select v-model="form.responseType"
                        disabled>
                <a-select-option v-for="(item,index) in responseTypeList"
                                 :key="index"
                                 :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="12"
                 :lg="12"
                 :xl="12"
                 :xxl="12">
            <a-form-model-item label="响应时间">
              <a-range-picker class="input-width"
                              disabled
                              v-model="form.responseTime"></a-range-picker>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="方案说明"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }">
              <a-input type='textarea'
                       :autoSize="{minRows: 10,maxRows: 10}"
                       v-model="form.explain"
                       disabled>
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="方案附件"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }">
              <a-row :gutter="16">
                <a-col :md="24"
                       :lg="24"
                       :xl="24"
                       :xxl="24">
                  <a-upload accept=".xlsx,.xls,.doc,.docx,.pdf,.jpg,.jpeg,.png"
                            :fileList="form.fileList"
                            :remove="remove">
                    <a-button disabled>
                      <a-icon type="upload" /> 选择文件 </a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="form.emergencyType==='4'"
               :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="选择规则"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }">
              <a-select v-model="form.regular"
                        disabled>
                <a-select-option v-for="(item,index) in regularList"
                                 :key="index"
                                 :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :md="24"
                 :lg="24"
                 :xl="24"
                 :xxl="24">
            <a-form-model-item label="所选企业"
                               :label-col="{ span: 4}"
                               :wrapper-col="{ span: 17 }">
              <a-tag v-for="(item,index) in enterpriseList"
                     :key="index">{{item.name}}</a-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div class="drawer-footer">
        <a-button key="back"
                  @click="handleVisible">关闭</a-button>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import { Drawer, FormModel, Row, Col, Input, Select, DatePicker, Button, Tag, Icon, Upload } from 'ant-design-vue'
import { getHnPlanById, queryHnRuleList } from '@/request/api/emergencyControl/schemeManagement'
import { getDictData } from '@/request/api/common'

export default {
  name: 'SchemeView',
  components: {
    ADrawer: Drawer,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    ARow: Row,
    ACol: Col,
    AInput: Input,
    ASelect: Select,
    ASelectOption: Select.Option,
    ARangePicker: DatePicker.RangePicker,
    AButton: Button,
    ATag: Tag,
    AIcon: Icon,
    AUpload: Upload
  },
  props: {
    // 是否打查看抽屉
    viewVisible: {
      type: Boolean,
      required: true
    },
    // 查看抽屉id
    viewId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      // 标题
      title: '方案信息',
      // loading
      formLoadingVisible: false,
      // 布局
      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
      // 表单数据
      form: {
        fromTo: [],
        responseTime: []
      },
      // 应急类型列表
      emergencyTypeList: [],
      // 响应类型列表
      responseTypeList: [],
      // 规则列表
      regularList: [],
      // 企业列表
      enterpriseList: []
    }
  },
  watch: {
    // 监听抽屉打开关闭
    viewVisible: {
      handler (newV, oldV) {
        this.init()
      }
    }
  },
  methods: {
    // 初始化
    async init () {
      // 获取数据字典
      this.dataDictionary = await this.getDataDictionary()
      // 写入应急类型
      this.emergencyTypeList = this.dataDictionary['W-067']
      // 写入响应类型
      this.responseTypeList = this.dataDictionary['W-068']
      // 获取规则列表
      this.getRegularList()
      this.getSchemeShow()
    },
    // 获取数据字典
    getDataDictionary () {
      return new Promise((resolve, reject) => {
        getDictData('W-067,W-068,W-069').then(res => {
          resolve(res.data)
        }).catch(error => {
          reject(error)
          console.log(error)
        })
      })
    },
    // 获取规则列表
    getRegularList () {
      queryHnRuleList({
        type: '2'
      }).then(res => {
        if (res.code === '0') {
          this.regularList = res.data
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取方案详细信息
    getSchemeShow () {
      getHnPlanById({
        id: this.viewId
      }).then(res => {
        if (res.code === '0') {
          this.form = {
            name: res.data.name,
            emergencyType: res.data.contingencyType,
            fromTo: [this.$moment(res.data.startTime, 'YYYY-MM-DD'), this.$moment(res.data.endTime, 'YYYY-MM-DD')],
            responseType: res.data.responseType,
            responseTime: [this.$moment(res.data.responseStartTime, 'YYYY-MM-DD HH:mm'), this.$moment(res.data.responseEndTime, 'YYYY-MM-DD HH:mm')],
            explain: res.data.remark,
            regular: res.data.ruleId,
            fileList: res.data.hnPlanFileList.map(el => {
              return {
                uid: el.id,
                name: el.fileName,
                status: 'done',
                response: '',
                url: el.fileIndex
              }
            })
          }
          this.enterpriseList = res.data.hnPlanEntinfoList.map(el => {
            return {
              value: el.planId,
              name: el.entinfoName
            }
          })
        }
        this.formLoadingVisible = true
      }).catch(error => {
        console.log(error)
        this.formLoadingVisible = true
      })
    },
    // 关闭抽屉
    handleVisible () {
      this.$emit('handleVisible', false)
    },
    // 文件删除
    remove () {
      return false
    }
  }
}
</script>
<style lang="scss">
</style>
